<template>
	<div class="fortress-date-time-stat">
		<div class="item">
			<div class="label">开始时间</div>
			<div class="value">
				<el-date-picker
					class="el-date-picker"
					v-model="formData.startTime"
					type="date"
					placeholder="选择开始时间"
					value-format="yyyy-MM-dd"
				></el-date-picker>
				<el-select v-model="formData.startType">
					<el-option value="am" label="上午"></el-option>
					<el-option value="pm" label="下午"></el-option>
				</el-select>
			</div>
		</div>
		<div class="item">
			<div class="label">结束时间</div>
			<div class="value">
				<el-date-picker
					class="el-date-picker"
					v-model="formData.endTime"
					type="date"
					placeholder="选择结束时间"
					value-format="yyyy-MM-dd"
					:picker-options="{
						disabledDate: endDisabledDate,
					}"
				></el-date-picker>
				<el-select v-model="formData.endType">
					<el-option value="am" label="上午"></el-option>
					<el-option value="pm" label="下午"></el-option>
				</el-select>
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: "fortress-date-time-stat-day",
	model: {
		prop: "value",
		event: "update:value",
	},
	props: {
		value: {
			type: [Object],
			default: () => ({}),
		},
		readonly: {
			type: Boolean,
			default: false,
		},
		disabled: {
			type: Boolean,
			default: false,
		},
		clearable: {
			type: Boolean,
			default: false,
		},
		size: {
			type: String,
		},
	},
	data() {
		return {
			formData: {
				startTime: "",
				endTime: "",
				startType: "am",
				endType: "am",
			},
		}
	},
	computed: {},
	methods: {
		endDisabledDate(ndate) {
			const date = new Date(ndate)
			const startTime = new Date(this.formData.startTime + " 00:00:00")
			if (startTime) {
				return date.getTime() < startTime.getTime()
			}
			return false
		},
	},
	watch: {
		value: {
			handler(value) {
				this.formData.startTime = value.startTime
				this.formData.endTime = value.endTime
				this.formData.startType = value.startType || "am"
				this.formData.endType = value.endType || "am"
			},
			deep: true,
			immediate: true,
		},
		formData: {
			handler(value) {
				this.$emit("update:value", {
					...this.value,
					...value,
				})
				this.$emit("input", {
					...this.value,
					...value,
				})
			},
			deep: true,
		},
	},
}
</script>

<style lang="scss" scoped>
.fortress-date-time-stat {
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 10px;
		.label {
			width: 100px;
			flex: none;
			text-align: right;
			&::before {
				content: "*";
				color: #f00;
				padding-right: 5px;
				vertical-align: middle;
				font-size: 12px;
			}
		}
		.value {
			width: 100%;
			padding-left: 15px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.el-date-picker {
				width: 100%;
				margin-right: 15px;
			}
		}
	}
}
</style>
